<template>
    <div class="exam-cell">
        <div class="exam-cell__head">
            <div class="exam-cell__status">{{examStatus[one.status]}}</div>
            <div class="exam-cell__title">{{one.examName}}</div>
        </div>
        <div class="exam-cell__content clearfix">
            <div class="exam-cell__info">
                <p>
                    <span>开始时间：</span>
                    <span>{{one.startTime}}</span>
                </p>
                <p>
                    <span>考试试卷：</span>
                    <span>{{one.paperName}}</span>
                </p>
                <p>
                    <span>考试人数：</span>
                    <span>{{one.examNum}}</span>
                </p>
            </div>
            <div class="exam-cell__info">
                <p>
                    <span>结束时间：</span>
                    <span>{{one.endTime}}</span>
                </p>
                <p>
                    <span>题量：</span>
                    <span>{{one.num}}</span>
                </p>
                <p>
                    <span>创建时间：</span>
                    <span>{{one.createTime}}</span>
                </p>
            </div>
            <div class="exam-cell__info">
                <p>
                    <span>考试时长：</span>
                    <span>{{one.examTime}}</span>
                </p>
                <p>
                    <span>总分：</span>
                    <span>{{one.scores}}</span>
                </p>
                <p>
                    <span>创建人：</span>
                    <span>{{one.creator}}</span>
                </p>
            </div>
            <div class="exam-cell__btns" v-if="showBtns">
                <Button :disabled="one.status!=0" @click.stop="handleEdit(one.examId)">编辑</Button>
                <Button :disabled="one.status!=0" @click.stop="handlePush(one.examId)" type="primary">发布</Button>
                <Button :disabled="one.status==1||one.status==2" @click.stop="handleDelete(one.examId)" type="warning">删除</Button>
            </div>
        </div>
    </div>
</template>
<script>
import { examStatus } from '@/libs/enums'
export default {
    props: {
        value: {
            type: Object,
            default: () => {}
        },
        showBtns: {
            type: Boolean,
            default: false
        },
        one: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {
            examStatus: examStatus
        }
    },
    methods: {
        handleEdit (id) {
            this.$emit('on-edit', id)
        },
        handlePush (id) {
            this.$emit('on-push', id)
        },
        handleDelete (id) {
            this.$emit('on-delete', id)
        }
    }
}
</script>
<style lang="less" scoped>
.exam-cell {
    & + & {
        margin-top: 15px;
    }
    border: 1px solid #ccc;
    &__head {
        background-color: #f5f7f9;
        position: relative;
        padding: 6px 20px;
        line-height: 28px;
    }
    &__content {
        padding: 20px;
        position: relative;
    }
    &__title {
        font-size: 16px;
        font-weight: 700;
        margin-right: 80px;
    }
    &__status {
        float: right;
    }
    &__info {
        float: left;
        width: 24%;
        padding-right: 10px;
        p + p {
            margin-top: 15px;
        }
    }
    &__btns {
        position: absolute;
        right: 20px;
        bottom: 20px;
        .ivu-btn + .ivu-btn {
            margin-left: 10px;
        }
    }
}
</style>
